<template>
  <view class="custom-tab-bar">
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      class="tab-item"
      :class="{ active: currentIndex === index }"
      @click="switchTab(index, item.pagePath)"
    >
      <image 
        :src="currentIndex === index ? item.selectedIconPath : item.iconPath" 
        class="tab-icon"
      />
      <text 
        class="tab-text" 
        :style="{ color: currentIndex === index ? selectedColor : color }"
      >
        {{ item.text }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 定义响应式数据
const currentIndex = ref(0);
const color = '#7A7E83';
const selectedColor = '#007AFF';

const tabList = [
  {
    pagePath: '/pages/index/index',
    iconPath: '/static/home.png',
    selectedIconPath: '/static/home-active.png',
    text: '首页'
  },
  {
    pagePath: '/pages/case/case',
    iconPath: '/static/case.png',
    selectedIconPath: '/static/case-active.png',
    text: '案例'
  },
  {
    pagePath: '/pages/team/team',
    iconPath: '/static/team.png',
    selectedIconPath: '/static/team-active.png',
    text: '产品'
  },
  // {
  //   pagePath: '/pages/team/team',
  //   iconPath: '/static/team.png',
  //   selectedIconPath: '/static/team-active.png',
  //   text: '团队'
  // },
  // {
  //   pagePath: '/pages/qualification/qualification',
  //   iconPath: '/static/qualification.png',
  //   selectedIconPath: '/static/qualification-active.png',
  //   text: '资质'
  // }
];

// 定义方法
const switchTab = (index: number, pagePath: string) => {
  // 防止重复点击当前tab
  if (currentIndex.value === index) return;
  
  currentIndex.value = index;
  uni.reLaunch({
    url: pagePath
  });
};

// 获取当前页面路径并设置高亮
const setActiveTab = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const route = currentPage.route;
  
  // 查找匹配的tab
  const index = tabList.findIndex(item => item.pagePath.includes(route));
  if (index !== -1) {
    currentIndex.value = index;
  }
};

// 页面加载时设置当前tab
onMounted(() => {
  setActiveTab();
});
</script>

<style scoped>
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #ffffff;
  display: flex;
  border-top: 1px solid #eee;
  z-index: 999;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.tab-item.active {
  transform: scale(1.05);
}

.tab-icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease;
}

.tab-item.active .tab-icon {
  transform: scale(1.1);
}

.tab-text {
  font-size: 12px;
  margin-top: 2px;
  transition: all 0.3s ease;
}

.tab-item.active .tab-text {
  font-weight: bold;
}
</style>